<template>
    <div class="mainCenter">
        <div class="title">图书管理</div>
        <div class="mainCenterBox">
            <div class="searchBox">
                <el-form>
                    <el-form-item>
                        <el-input type="text" placeholder="书名/作者/ISBN" v-model="value.keyword"></el-input>
                    </el-form-item>
                    <el-form-item style="margin-left: 20px;">
                        <el-select v-model="value.type" placeholder="选择类型">
                            <el-option :label="'全部'" :value="-1"></el-option>
                            <el-option v-for="item in bookData.typeList" :label="item.type" :value="item.typeid"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="search"><el-icon>
                                <Search />
                            </el-icon>查询</el-button>
                    </el-form-item>
                </el-form>
                <div class="addInfo">
                    <el-button type="danger"><el-icon>
                            <Delete />
                    </el-icon>批量操作</el-button>
                    <el-button type="primary" @click="addbookbtn"><el-icon>
                            <Plus />
                        </el-icon>添加图书</el-button>
                </div>
            </div>
            <el-table style="width: 100%" stripe border :data="bookData.booklist">
                <el-table-column label="图书编号" prop="bookid" />
                <el-table-column align="center" prop="borrowid" label="图书封面" >
                    <template #default="scope" >
                        <div class="bookImage" style="width: 108px;height: 150px;overflow: hidden;margin: 0 auto;">
                            <img :src="scope.row.bookimage" alt="" style="width: 100%;height: 100%;">
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="bookname" label="图书名字" />
                <el-table-column prop="author" label="图书作者" />
                <el-table-column prop="typeList.type" label="图书类型" />
                <el-table-column label="图书总数" prop="bookcount" />
                <el-table-column label="图书在馆数" prop="bookcountnow"/>
                <el-table-column  label="操作">
                    <template #default="scope">
                        <el-button type="primary" plain size="small" @click="editbook(scope.$index,scope.row)"><el-icon>
                                <EditPen />
                            </el-icon>编辑</el-button>
                        <el-button type="danger" plain size="small" @click="deleteBook(scope.$index,scope.row)"><el-icon>
                                <Delete />
                            </el-icon>删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination background layout="total, sizes, prev, pager, next" :page-sizes="[5, 10]" :total="pagetions.count"
                style="float: right;margin-top: 20px;" v-model:page-size="pagetions.num" v-model:current-page="pagetions.page"
                @size-change="pagetions.changeLimit" @current-change="pagetions.jumpPage" />

        </div>
        <el-drawer v-model="isChange" :title="'图书操作'" direction="btt" size="800">
                <addbook :book="bookData.book" @emit-change="getData" @emit-edit="editData"></addbook>
        </el-drawer>
    </div>
</template>

<script setup lang="ts">

import addbook from './addbook.vue';
import { reqGetBookList, reqSearchBook,reqGetTypeList, reqDeleteBook} from '@/api/common';
import { elementConfirm, tip } from '@/utils/alert';
import { onMounted, reactive, ref, watch } from 'vue';
import { BookType, TypeListType } from '@/types/book';
import { number } from 'echarts';

const index=ref<number>(-1)
const bookData=reactive<{booklist:BookType[],isSearch:boolean,typeList:TypeListType[],book:BookType|null}>({
    booklist:[],
    isSearch:false,
    typeList:[],
    book:null,
})

const isChange=ref<boolean>(true);

const value=reactive<{keyword:string,type:number}>({
    keyword:'',
    type:-1
})
watch(()=>isChange.value,()=>{
    if(isChange.value==false){
        bookData.book=null
    }
})
const getData=(value:any)=>{
    bookData.booklist.unshift(value.info)
    bookData.booklist.pop()
    isChange.value=value.bool
}

const editData=(value:any)=>{
    bookData.booklist[index.value]=value.info
    bookData.booklist.pop()
    isChange.value=value.bool
}


const pagetions=reactive({
    count:0,
    page:1,
    num:5,
    jumpPage(page:number){
        pagetions.page=page
        bookData.isSearch?searchBookList():getBookList()
    },
    changeLimit(num:number){
        pagetions.num=num
        bookData.isSearch?searchBookList():getBookList()
    }
})
const getBookList=async()=>{
    let res=await reqGetBookList(pagetions.num,pagetions.page)
    bookData.booklist=res.data.data.data
    pagetions.count=res.data.data.count
}

const getTypeList=async()=>{
    let res=await reqGetTypeList(50,1)
    bookData.typeList=res.data.data.data
}

const searchBookList=async()=>{
    console.log(typeof value.keyword);
    
    let res=await reqSearchBook(value.keyword,value.type,pagetions.num,pagetions.page)
    bookData.booklist=res.data.data.data
    console.log(res.data.data);
    pagetions.count=res.data.data.count
    
}

const editbook=(idx:number,info:BookType)=>{
    index.value=idx
    isChange.value=true
    bookData.book=info
    
}


const deleteBook=(idx:number,info:BookType)=>{
    elementConfirm().then(()=>{
        reqDeleteBook(info).then(res=>{
             tip(res.data.info,"success")
             if(bookData.isSearch){
                searchBookList()
             }else{
                getBookList()
             }
        })
    })
}

const search=()=>{
    pagetions.page=1
    bookData.isSearch=true
    console.log(value);
    searchBookList()

}

const addbookbtn=()=>{
    bookData.book=null
    isChange.value=true
}
onMounted(()=>{
    isChange.value=false
    getBookList()
    getTypeList()
})
</script>

<style scoped lang="scss">
:deep(.el-drawer) {
    border-radius: 5px;
    width: 800px;
    position: absolute;
    left: 50%;
    margin-left: -400px;
    top: 50%;
    margin-top: -400px;
    display: flex;
    justify-content: center;

}

:deep(.el-drawer__header) {
    margin-bottom: 12px;
    ;
}
:deep(.el-drawer__body){
    display: flex;
    justify-content: center;
}
</style>